Web App Manifest হলো একটি JSON ফাইল যা একটি ওয়েব অ্যাপ্লিকেশনের মেটাডেটা (যেমন নাম, আইকন, রং, এবং অন্যান্য কনফিগারেশন) সংরক্ষণ করে। এটি মূলত Progressive Web App (PWA) তৈরি করার জন্য ব্যবহৃত হয় এবং ব্যবহারকারীদের জন্য একটি অ্যাপ্লিকেশন-যেমন অভিজ্ঞতা প্রদান করে।
Web App Manifest কি?
Web App Manifest একটি JSON ফাইল যা ব্রাউজারকে জানায় যে এটি একটি প্রগ্রেসিভ ওয়েব অ্যাপ্লিকেশন (PWA)। এই ফাইলটির মাধ্যমে অ্যাপ্লিকেশনটির নাম, আইকন, রং, এবং অন্যান্য কনফিগারেশন সেট করা হয়, যা ওয়েব অ্যাপ্লিকেশনকে মোবাইল অ্যাপ্লিকেশন মত মনে হয়।
Web App Manifest তৈরি করা
Web App Manifest তৈরির জন্য, আপনাকে প্রথমে একটি manifest.json ফাইল তৈরি করতে হবে এবং তারপর আপনার HTML ডকুমেন্টের মধ্যে এটি লিংক করতে হবে। নিচে একটি সাধারণ উদাহরণ দেওয়া হলো:
১. Manifest JSON ফাইল তৈরি করা:
{
"name": "My Web App",
"short_name": "WebApp",
"description": "This is an example of a Progressive Web App",
"start_url": "/index.html",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#000000",
"icons": [
{
"src": "icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
মানে:
- name: অ্যাপ্লিকেশনের পূর্ণ নাম।
- short_name: অ্যাপ্লিকেশনের সংক্ষিপ্ত নাম (যা হোম স্ক্রীনে প্রদর্শিত হবে)।
- description: অ্যাপ্লিকেশনের সংক্ষিপ্ত বর্ণনা।
- start_url: যখন অ্যাপ্লিকেশন শুরু হবে, তখন কোন পেজটি লোড হবে।
- display: অ্যাপ্লিকেশনটি কিভাবে প্রদর্শিত হবে।
standaloneমানে এটি ব্রাউজারের বাইরে একটি অ্যাপ্লিকেশন মত কাজ করবে। - background_color: অ্যাপ্লিকেশনের ব্যাকগ্রাউন্ড কালার।
- theme_color: ব্রাউজারের টুলবারের জন্য থিম কালার।
- icons: অ্যাপ্লিকেশনের আইকনগুলি, যা বিভিন্ন সাইজে থাকতে হবে যাতে এটি সব ধরনের ডিভাইসে সঠিকভাবে প্রদর্শিত হয়।
২. Manifest ফাইল লিংক করা
HTML ডকুমেন্টে manifest.json ফাইলটি লিংক করতে হবে, যাতে ব্রাউজার এটি চিনতে পারে।
<head>
<link rel="manifest" href="/manifest.json">
</head>
এটি ব্রাউজারকে নির্দেশ দেয় যে, এটি একটি প্রগ্রেসিভ ওয়েব অ্যাপ্লিকেশন এবং manifest.json ফাইলটি ডাউনলোড করতে হবে।
৩. HTTPS এবং Service Worker সেটআপ
Web App Manifest এবং PWA এর কার্যকারিতা কার্যকর করতে, আপনার সাইটটি HTTPS প্রোটোকলে থাকতে হবে এবং Service Worker সেটআপ করতে হবে।
Service Worker হলো একটি স্ক্রিপ্ট যা আপনার ব্রাউজারে ব্যাকগ্রাউন্ডে চলে এবং এটি অফলাইনে কাজ করার সুবিধা দেয়, ক্যাশিং এবং পুশ নোটিফিকেশন পরিচালনা করতে সহায়তা করে।
এটি পিডব্লিউএ তৈরির জন্য অপরিহার্য।
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js')
.then(registration => {
console.log('Service Worker registered with scope:', registration.scope);
})
.catch(error => {
console.log('Service Worker registration failed:', error);
});
});
}
৪. Service Worker এবং Caching
এটি একটি প্রাথমিক Service Worker কোড উদাহরণ যা ক্যাশিং এবং অফলাইন সাপোর্ট সুনিশ্চিত করে:
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open('my-cache').then((cache) => {
return cache.addAll([
'/index.html',
'/styles.css',
'/script.js',
'/icons/icon-192x192.png',
]);
})
);
});
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then((cachedResponse) => {
return cachedResponse || fetch(event.request);
})
);
});
এটি অ্যাপ্লিকেশনটি ক্যাশ করে রাখে, যাতে ব্যবহারকারী অফলাইনে থাকলে তারা অ্যাপটি ব্যবহার করতে পারে।
Web App Manifest কনফিগারেশন
- App Icons:
ওয়েব অ্যাপ্লিকেশনের জন্য বিভিন্ন সাইজে আইকন তৈরি করতে হবে। সাধারণত 192x192px এবং 512x512px সাইজের আইকন ব্যবহার করা হয়। - Start URL:
start_urlহল অ্যাপ্লিকেশনের প্রাথমিক পেজ, যেটি অ্যাপ স্টার্ট হওয়ার সময় লোড হবে। এটি মূল পৃষ্ঠার একটি রিলেটিভ পাথ হতে হবে, যেমন/index.htmlবা/home. - Display Mode:
displayঅপশনটিstandaloneবাfullscreenহতে পারে, যা ওয়েব অ্যাপের অভ্যন্তরীণ ডিসপ্লে স্টাইল নিয়ন্ত্রণ করে। Background Color and Theme Color:
এগুলো ওয়েব অ্যাপের অভ্যন্তরীণ রঙ এবং ব্রাউজারের টুলবারের রঙ কাস্টমাইজ করার জন্য ব্যবহৃত হয়। যেমন:"background_color": "#ffffff", "theme_color": "#000000"- Offline Functionality:
Service Worker ব্যবহারের মাধ্যমে অ্যাপটির অফলাইন কার্যক্ষমতা সুনিশ্চিত করতে হবে। এটি মোবাইল ডিভাইসের জন্য অত্যন্ত গুরুত্বপূর্ণ, যেখানে ইন্টারনেট কানেকশন সীমিত বা অনুপস্থিত হতে পারে।
সারসংক্ষেপ
Web App Manifest হল একটি JSON ফাইল যা ওয়েব অ্যাপ্লিকেশনের তথ্য সংরক্ষণ করে এবং PWA হিসেবে সেটিকে কার্যকরী করে তোলে। এটি ব্যবহারকারীদের জন্য অ্যাপ-লাইক অভিজ্ঞতা তৈরি করতে সাহায্য করে, যেমন হোম স্ক্রীনে অ্যাপ আইকন প্রদর্শন এবং অ্যাপ্লিকেশনের লেআউট নিয়ন্ত্রণ করা। এছাড়া Service Worker এর মাধ্যমে অ্যাপ্লিকেশনটি অফলাইনে কাজ করার সক্ষমতা অর্জন করে এবং ব্যবহারকারীর তথ্য সুরক্ষিত থাকে।
Read more
